<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>简易选项卡</title>
	<style>
		#box{
			width: 500px;
			height: 400px;
			margin: 0 auto;
			position: relative;
			border: solid 1px #ccc;
		}
		#U li{
			float: left;
			width: 100px;
			height: 30px;
			border: 1px solid #ccc;
			background-color: purple;
			list-style: none;
			text-align: center;
			line-height: 30px;
		}
		a{
			text-decoration: none;
		}
		#in1{
			width: 300px;
			height: 320px;

		}
		#in1 div{
			width: 300px;
			height: 300px;
   			position: absolute;
   			display: none;
		}
		#U D{
			display: block;
			background-color: green;
		}
		.F{
			display: block;
		}
	</style>
	<script>
	 	window.onload=function(){
			var Ou = document.getElementById('U');
			   Oul = Ou.getElementsByTagName('li');
			   for (var i = 0; i < Oul.length; i++) {
			   	Oul[i].onmouseover = function(){
			   	alert(666);
			   	
			   }
	 	    }
	    }
	</script>
</head>
<body>
     <div id="box">
     	
     		<ul id="U">
     			<li class="D" style='background-color: green;'> 
     				<a href="javascript:;">电影</a>
     			</li>
     			<li>
     				<a href="javascript:;">小说</a>
     			</li>
     			<li>
     				<a href="javascript:;">游戏</a>
     			</li>
     			<li>
     				<a href="javascript:;">音乐</a>
     			</li>
     		</ul>
			<div style="clear: both;"></div>
     
     	<div id="in1">
     		<div class="F">
     			<ul>
     				<li><a href=""> Hey Gays !</a></li>
     				<li><a href=""> Hey Gays !</a></li>
     				<li><a href=""> Hey Gays !</a></li>
     				<li><a href=""> Hey Gays !</a></li>
     				<li><a href=""> Hey Gays !</a></li>
     				<li><a href=""> Hey Gays !</a></li>
     				<li><a href=""> Hey Gays !</a></li>
     				<li><a href=""> Hey Gays !</a></li>
     			</ul>
     		</div>
     		<div>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     		</div>
     		<div>
     			<ul>
     				<li>wwwwwwwwwwwwwwwwwwwww</li>
     				<li>dddddddddddddd</li>
     				<li>gggggggggggggg</li>
     				<li>g555555555555555555</li>
     				<li>444444444444444444</li>
     				<li>9999999999999999</li>
     			</ul>
     		</div>
     		<div>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     			<p>hello world? Hey</p>
     		</div>
     		
     	</div>
     </div>
	
</body>
</html>